<template>
  <view class="container">
    <view
      class="title"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
        padding-left: 20rpx;
        margin-top: 40rpx;
        margin-bottom: 40rpx;
      "
    >
      <view class="left" style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 34rpx; color: #111111">
          {{ deskInfo.name }}
        </text>
        <text style="font-weight: bold; font-size: 22rpx; color: #666666">
          ({{ orderInfo.person }}人)
        </text>
        <u-icon name="edit-pen" v-on:click="onEditPersonClick"></u-icon>
      </view>
      <view class="right" style="font-size: 22rpx; color: #666666">
        <text @click="onMenberClick">会员</text>
        <text
          style="margin-left: 31rpx; margin-right: 22rpx"
          v-on:click="onOptClick"
          >操作</text
        >
      </view>
    </view>

    <view
      class="info"
      style="
        width: 710rpx;
        margin-left: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        padding: 0 21rpx;
        border-bottom: 1px solid #ededed;
      "
    >
      <view
        style="
          font-weight: bold;
          font-size: 30rpx;
          color: #111111;
          height: 88rpx;
          line-height: 88rpx;
        "
        >菜品信息</view
      >
      <view class="dish-list">
        <view
          v-for="(food, index) of cart"
          :key="index"
          style="height: 90rpx; display: flex; align-items: center"
        >
          <view
            class="name"
            style="
              width: 376rpx;
              font-weight: 500;
              font-size: 26rpx;
              color: #111111;
            "
          >
            {{ food.name }}{{ food | getSpec }}
          </view>
          <view
            class="price"
            style="font-weight: 500; font-size: 22rpx; color: #111111; flex: 1"
            >￥{{ orderInfo.userId > 0 ? food.vipPrice : food.posPrice }}</view
          >
          <view style="display: flex; align-items: center; height: 48rpx">
            <view
              class="l"
              style="
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                border: 2px solid #f0b848;
                color: #222222;
                font-size: 44rpx;
                text-align: center;
                line-height: 36rpx;
              "
              @click="handleRemoveCart(food, index)"
            >
              -</view
            >
            <view
              class="numb-box"
              style="
                font-weight: bold;
                font-size: 26rpx;
                color: #111111;
                margin-left: 16rpx;
                margin-right: 16rpx;
              "
              >{{ food.nums }}</view
            >
            <view
              class="r"
              style="
                width: 48rpx;
                height: 48rpx;
                background-color: #f0b947;
                border: 2px solid #f0b947;
                border-radius: 24rpx;
                color: #222222;
                font-size: 44rpx;
                text-align: center;
                line-height: 36rpx;
              "
              @click="handleAddToShoppingCart(food, index)"
            >
              +
            </view>
          </view>
        </view>
      </view>
      <view
        class="sum-box"
        style="
          height: 115rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        "
      >
        <text style="font-weight: 500; font-size: 22rpx; color: #111111">
          共{{
            cart.reduce((p, item) => {
              return p + item.nums;
            }, 0)
          }}件商品，合计</text
        ><text
          style="
            font-weight: bold;
            font-size: 20rpx;
            color: #d5283d;
            margin-left: 12rpx;
          "
        >
          ￥</text
        ><text style="font-weight: bold; font-size: 30rpx; color: #d5283d">{{
          cart
            .reduce((p, item) => {
              return (
                p +
                item.nums *
                  (orderInfo.userId > 0 ? item.vipPrice : item.posPrice)
              );
            }, 0)
            .toFixed(2)
        }}</text>
      </view>
    </view>

    <view
      class="remark"
      style="
        width: 710rpx;
        height: 98rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(4, 0, 0, 0.04);
        border-radius: 18rpx;
        margin-left: 20rpx;
        margin-top: 30rpx;
        border-top: 1px solid #ededed;
        display: flex;
        align-items: center;
      "
    >
      <view
        class="l"
        style="
          padding: 0 30rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #111111;
        "
        >备注</view
      >
      <view class="r" style="flex: 1; padding: 0 30rpx">
        <u--input
          placeholder="请输入备注 >"
          border="none"
          v-model="remark"
          inputAlign="right"
        ></u--input>
      </view>
    </view>

    <view class="bottom-btn">
      <view
        style="
          height: 75rpx;
          padding-left: 30rpx;
          display: flex;
          align-self: center;
        "
      >
        <u-checkbox-group v-model="checkboxValue" placement="row">
          <u-checkbox
            :customStyle="{ marginRight: '30rpx' }"
            v-for="(item, index) in [
              {
                label: `打印客单`,
                name: `isPrintKeDan`,
              },
              {
                label: `打印制作单`,
                name: `isPrintZZDan`,
              },
            ]"
            :key="index"
            :label="item.label"
            :name="item.name"
            activeColor="#f3bd4e"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view
        style="
          margin-left: 30rpx;
          width: 690rpx;
          height: 90rpx;
          background: linear-gradient(135deg, #fbc960, #f0b947);
          box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
          border-radius: 45rpx;
          overflow: hidden;
          display: flex;
          align-items: center;
        "
      >
        <view
          class="l"
          style="
            width: 345rpx;
            height: 86rpx;
            background: #ffffff;
            border-radius: 43rpx 0 0 43rpx;
            border: 2rpx solid #f0b947;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 30rpx;
            color: #111111;
          "
          >下单并支付</view
        >
        <view
          class="r"
          style="
            width: 345rpx;
            height: 86rpx;
            border-radius: 43rpx 0rpx 0rpx 43rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 30rpx;
            color: #111111;
          "
          v-on:click="onXD"
          >立即下单</view
        >
      </view>
    </view>

    <!-- 开台弹窗 人数 -->
    <u-popup :show="showKtPopup" @close="close" @open="open" :closeable="true">
      <view
        class="layout"
        style="
          background-color: rgb(255, 255, 255);
          font-size: 14px;
          width: 100vw;
        "
      >
        <!-- 显示屏 -->
        <view class="screen">
          <view
            class="th"
            style="
              width: 100vw;
              height: 124rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 36rpx;
              font-weight: bold;
            "
          >
          </view>
          <view
            class="kk"
            style="
              height: 111rpx;
              margin: 0 30rpx;
              border: 1px solid #e8e8e8;
              border-radius: 10rpx;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding: 0 25rpx;
            "
          >
            <view style="font-weight: 500; font-size: 22rpx; color: #999999"
              >请输入就餐人数:<text
                style="
                  font-weight: bold;
                  font-size: 80rpx;
                  color: #edae33;
                  margin-left: 5rpx;
                "
                >{{ person }}</text
              ></view
            >
          </view>
          <view class="ot" style="height: 30rpx"></view>
        </view>
        <!-- 输入框 start -->
        <view class="kebo" style="width: 100vw">
          <view style="grid-area: a" class="table-cell" @click="onNumClick(1)"
            >1</view
          >
          <view style="grid-area: b" class="table-cell" @click="onNumClick(2)"
            >2</view
          >
          <view style="grid-area: c" class="table-cell" @click="onNumClick(3)"
            >3</view
          >
          <view style="grid-area: d" class="table-cell" @click="onNumClick(4)"
            >4</view
          >
          <view style="grid-area: e" class="table-cell" @click="onNumClick(5)"
            >5</view
          >
          <view style="grid-area: f" class="table-cell" @click="onNumClick(6)"
            >6</view
          >
          <view style="grid-area: g" class="table-cell" @click="onNumClick(7)"
            >7</view
          >
          <view style="grid-area: h" class="table-cell" @click="onNumClick(8)"
            >8</view
          >
          <view style="grid-area: i" class="table-cell" @click="onNumClick(9)"
            >9</view
          >
          <view
            style="grid-area: o; border-bottom: 1rpx solid #fff"
            class="table-cell"
            @click="onNumClick(0)"
            >0</view
          >
          <view style="grid-area: j" class="table-cell" v-on:click="onDelClick">
            <u-icon name="backspace" size="26"> </u-icon>
          </view>
          <view
            style="
              grid-area: k;
              background: linear-gradient(34deg, #f3c45d, #edac2f);
              border-right: 1rpx solid #edac2f;
              border-bottom: 1rpx solid #edac2f;
            "
            class="table-cell"
            @click="onKtClick"
            >修改</view
          >
        </view>
        <!-- 输入框 end  -->
      </view>
    </u-popup>

    <!-- 操作 弹窗 -->
    <uni-popup ref="popup" type="top">
      <view
        style="
          width: 710rpx;
          margin-left: 20rpx;
          height: 425rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
          border-radius: 18rpx 0rpx 18rpx 18rpx;
          margin-top: 120rpx;
          padding: 0 10rpx;
        "
      >
        <view
          style="
            font-weight: 500;
            font-size: 30rpx;
            color: #111111;
            height: 83rpx;
            border-bottom: 2px solid #ededed;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <text style="font-weight: 500; font-size: 30rpx; color: #111111"
            >操作</text
          >
          <text
            style="
              position: absolute;
              top: 42rpx;
              right: 21rpx;
              transform: translateY(-50%);
            "
            v-on:click="onOptCancelClick"
            >X</text
          >
        </view>
        <view style="height: 340rpx; display: flex; flex-wrap: wrap">
          <view
            v-for="(item, index) in [
              {
                name: `打包`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `等叫`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `删除`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `菜品备注`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `赠菜`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `订单折/免`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `拼桌`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `转台`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `并台`,
                icon: `/static/images/icon/bag.png`,
              },
              {
                name: `撤台`,
                icon: `/static/images/icon/bag.png`,
              },
            ]"
            :key="index"
            style="
              width: 20%;
              height: 50%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            "
          >
            <image
              :src="item.icon"
              style="height: 43rpx; margin-top: 16rpx"
              mode="heightFix"
              @click="onOptItemClick(index)"
            />
            <view
              style="font-weight: 500; font-size: 24rpx; color: #333333"
              @click="onOptItemClick(index)"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { orderReverse } from "../../../common/modules/orderAssistan";
import {
  uGetStorageSync,
  uNavigateTo,
  uNavigateToWithParams,
  uSetStorageSync,
  uThrottle,
  uToast,
} from "../../../utils/uniUtils";

export default {
  async onLoad(opt) {
    this.deskId = opt.deskid;
    this.orderId = opt.orderid;
    this.getOrderList();
    this.cart = uGetStorageSync("order" + this.orderId) || [];
    let that = this;

    uni.$on("chooseMember", async function (data) {
      console.log("监听到事件来自 chooseMember ，携带参数 msg 为：", data);
      const res = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 122,
        data: { orderId: that.orderId, memberId: data.id },
        sign: uGetStorageSync("orderSign"),
      });
      await that.getOrderList();
    });
  },

  onShow() {
    this.cart = uGetStorageSync("order" + this.orderId) || [];
  },

  data() {
    return {
      checkboxValue: [],
      remark: "",
      deskId: 0,
      orderId: 0,
      cart: [],
      productModalVisible: false,
      cartPopupShow: false,
      showSearch: false,
      materialsOtherData: {},

      deskInfo: {},
      orderInfo: [],
      showKtPopup: false,
      person: 0,
      orderDetail: [],

      cart: [],
      orderInfo: null,
      deskInfo: null,
      optShow: false,
    };
  },
  filters: {
    getSpec(food) {
      if (food.specFlag) {
        let arr = [];
        let { specList, feedList, taskList } = food.materials;
        if (specList) {
          specList.forEach((element) => {
            arr.push(element.specName);
          });
        }
        if (feedList) {
          feedList.forEach((element) => {
            arr.push(element.name);
          });
        }
        if (taskList) {
          taskList.forEach((element) => {
            arr.push(element.name);
          });
        }
        return " (" + arr.join("、") + ")";
      }

      return "";
    },
  },

  methods: {
    // 获取点菜清单
    async getOrderList() {
      const result = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 113,
        data: {
          orderId: this.orderId,
          deskId: parseInt(this.deskId),
        },
        sign: uGetStorageSync("orderSign"),
      });
      if (result.status == 0) {
        const { desk, master, detail } = result.data;
        console.log("result", { desk, master, detail });
        this.deskInfo = desk;
        this.orderInfo = master;
        this.orderDetail = detail;
      }
    },
    onMenberClick() {
      uNavigateTo("/pages/workbench/orderingAssistant/member");
    },
    //修改人数
    async onEditPersonClick() {
      this.open();
    },

    open() {
      this.person = 0;
      this.showKtPopup = true;
    },
    close() {
      this.showKtPopup = !true;
    },

    onNumClick(i) {
      let old = this.person;
      this.person = parseInt(this.person + "" + i);
      if (this.person > 999) {
        this.person = old;
      }
    },

    onDelClick() {
      this.person = parseInt(
        (this.person + "").substring(0, (this.person + "").length - 1) || 0
      );
    },

    async onKtClick() {
      uThrottle(async () => {
        if (this.person <= 0) {
          uToast("请输入人数", "error");
          return;
        }
        let res = await orderReverse({
          msgId: "",
          storeId: uGetStorageSync("store").id,
          code: 142,
          data: {
            orderId: this.orderId,
            person: this.person,
          },
          sign: uGetStorageSync("orderSign"),
        });
        if (res.status == 0) {
          uToast("修改成功");
          this.close();
          await this.getOrderList();
        }
      });
    },
    handleAddToShoppingCart(product, idx) {
      ++this.cart[idx].nums;
      uSetStorageSync("order" + this.orderId, this.cart);
    },
    handleRemoveCart(product, idx) {
      if (!--this.cart[idx].nums) {
        this.cart.splice(idx, 1);
      }
      uSetStorageSync("order" + this.orderId, this.cart);
    },

    onOptClick: function () {
      this.$refs.popup.open("top");
    },
    onOptCancelClick: function () {
      console.log("onOptCancelClick :>>");
      this.$refs.popup.close();
    },
    async onOptItemClick(idx) {
      switch (idx) {
        case 0: {
          // 打包
          uNavigateToWithParams("/pages/workbench/orderingAssistant/cartOpt", {
            deskid: this.deskId,
            orderid: this.orderId,
            type: 0,
          });
          break;
        }
        case 1: {
          break;
        }
        case 2: {
          break;
        }
        case 3: {
          break;
        }
        case 4: {
          break;
        }
        case 5: {
          break;
        }
        case 6: {
          break;
        }
        case 7: {
          break;
        }
        case 8: {
          break;
        }
        case 9: {
          let res = await orderReverse({
            msgId: "",
            storeId: uGetStorageSync("store").id,
            code: 141,
            data: {
              deskId: this.deskId,
            },
            sign: uGetStorageSync("orderSign"),
          });
          if (res.status == 0) {
            uToast("消台成功!");
            setTimeout(() => {
              uNavigateTo("/pages/workbench/orderingAssistant/list");
            }, 1500);
          }

          break;
        }
        default:
          break;
      }
    },
    // methods放上面
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 226rpx;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 226rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(4, 0, 0, 0.04);
  border-radius: 0rpx;
}

.kebo {
  display: grid;
  grid-template-columns: 187rpx 187rpx 187rpx 1fr;
  grid-template-rows: 106rpx 106rpx 106rpx 167rpx;
  grid-template-areas:
    "a b c j"
    "d e f j"
    "g h i k"
    "o o o k";
  .table-cell {
    border: #f3f3f3 0.5rpx solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // font-weight: 500;
    color: #111111;
    font-size: 36rpx;
  }
}
</style>
